<template>
    <div>
        <label class="formItem">
            <span class="name">{{this.fieldName}}</span>
            <input type="text" :placeholder="this.placeholder"
                   :value="value"
                    @input="onValueChanged($event.target.value)"
            >
        </label>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import {Component,Watch,Prop} from 'vue-property-decorator'

    @Component
    export default class FormItem extends Vue{
        // value = '';
        @Prop({default:''}) readonly value!: string;
        //默认为空 值必须存在，类型为字符串
        @Prop({required:true}) fieldName!: string;
        //required prop是否必须,'!'表示必须有值
        @Prop() placeholder?: string;
        //'?' 表示可以为空

        // @Watch('value')
        onValueChanged(value: string){
            this.$emit('update:value',value)
        }

    }
</script>

<style lang="scss" scoped>
    .formItem {
        font-size: 14px;
        padding-left: 16px;
        display: flex;
        align-items: center;
        .name {
            padding-right: 16px;
        }
        input {
            height: 40px;
            flex-grow: 1;
            background: transparent;
            border: none;
            padding-right: 16px;
        }
    }
</style>